<#assign menuId=6>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>新增客户-${Application.systemName!}</title>
        <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
        <!-- bootstrap 3.0.2 -->
        <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <!-- font Awesome -->
        <link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css" />
        <!-- Ionicons -->
        <link href="../css/ionicons.min.css" rel="stylesheet" type="text/css" />
        <!-- Theme style -->
        <link href="../css/AdminLTE.css" rel="stylesheet" type="text/css" />
		<link href="../css/main.css" rel="stylesheet" type="text/css" />
		<link href="../css/bootstrap-tagsinput.css" rel="stylesheet" type="text/css" >
    	<link rel="stylesheet" href="../css/bootstrapValidator.min.css"/>
    	<link rel="stylesheet" href="../css/myself.css"/>
    	<style type="text/css">
    		*{
    			margin: 0;
    			padding: 0;
    		}
    		.box-header{
    			border-left: 6px solid #3882FF;
    			margin: 20px 10px 0;
    			padding: 0 5px;
    			font-size: 14px;
    			font-weight: bold;
    		}
    		table tr td span{
    			width: 100%;
    			display: inline-block;
    			text-align: right;
    		}
    		.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
			    vertical-align: middle;
			}
			.th{
				min-width: 100px;
			}
			.th span{
				text-align: center;
			}
    		.star{
    			color: red;
    		}
    		.addLink{
    			border: 1px solid #3882FF;
    			color: #3882FF;
    			padding: 2px 5px;
    			width: 12%;
    			margin-top: 5px;
    			cursor: pointer;
    		}
    		.style{
    			list-style: none;
    		}
    		.style li{
    			float: left;
    			border: 1px solid black;
    			padding: 2px 5px;
    			margin-right: 5px;
    		}
    		.image label{
    			width: 100px;
    			height: 100px;
    			float: left;
    			border: 1px solid #ccc;
    			text-align: center;
    			line-height: 100px;
    			margin-right: 10px;
    		}
    		#more{
    			display:none;
    		}
    		.red{
    			color:red;
    		}
    		.bootstrap-tagsinput{
		        border: 1px solid #ccc;
		        width: 100%;
		        box-shadow: none;
		        border-radius: 0;
		        padding: 6px;
		    }
	       	.bootstrap-tagsinput .tag{
		        margin-right: 2px;
		        color: #3882ff;
		        border: 1px solid;
		        border-radius: 0;
	       	}
	       	.bootstrap-tagsinput input {
			   	padding:0;
			    width: 170px;
			 }
	       	.label-info{
	        	background-color: #fff;
	       	}
	       	.label-info span{
	       		width: 2%;
	       		margin-left: 0;
	       	}
	       	.bootstrap-tagsinput .tag [data-role="remove"] {
			    margin-left: 0px;
			    cursor: pointer;
			}
			.find_div_xianshi{
		        height: auto;
		        line-height: 30px;
		        width: 100%;
		        position: absolute;
		        top: 33px;
		        z-index: 9;
		        border:1px solid #ccc;
		        background-color: #fff;
		        display: none;
	       }
	       .find_div_xianshi>a{
	        	padding: 0 10px;
	       }
	       .find_div_xianshi>span{
	        	text-align:left;
	       }
	       .find_div_xianshi>a:hover{
	       		cursor:pointer;
	       }
		   .find_div{
	            position: relative;
	        }
	        input[type="file"] {
			    display: inline-block;
			}
			.label {
				font-size: 100%;
			}
			.contacts .form-group{
				margin:0;
			}
			.contacts span{
				margin-top: 6px;
				display: inline-block; 
				text-align: left;
			}
			td td .find_div_xianshi{
				top: 44px;
			}
			
			
			/* 上传文件样式 */
			.file {
			    position: relative;
			    display: inline-block;
			    background: #D0EEFF;
			    border: 1px solid #99D3F5;
			    border-radius: 4px;
			    padding: 4px 12px;
			    overflow: hidden;
			    color: #1E88C7;
			    text-decoration: none;
			    text-indent: 0;
			    line-height: 20px;
			}
			.file input {
			    position: absolute;
			    font-size: 100px;
			    right: 0;
			    top: 0;
			    opacity: 0;
			}
			.file:hover {
			    background: #AADFFD;
			    border-color: #78C3F3;
			    color: #004974;
			    text-decoration: none;
			}
			.file_name{
	        	display: inline-block;
	        	width: auto;
	        	height: 30px;
	        	line-height: 30px;
	        	color: #3882FF;
	        	position: relative;
	        	top: -10px;
	        }
	        .file_fa{
	        	position: relative;
	        }
	        .file_fa button{
	        	position: absolute;
	        }
	        
	        
	        
	        /* 右边头部样式 */
    		.ol_left{
	            width: 100%;
	            height: 30px;
	            line-height: 30px;
	            padding: 0;
	        }
	        .ol_left>li{
	        	list-style: none;
	            float: left;
	            margin-right: 5px;
	        }
	        .ol_left li, .ol_left{
	        	margin-bottom: 0;
	        }
	        .content-header-right{
	        	position: absolute; 
	        	top: 25px; 
	        	right: 20px;
	        }
    	</style>
    </head>
    <body class="skin-blue">
        <!-- header logo: style can be found in header.less -->
        <#include "../header.html"/>
        <div class="wrapper row-offcanvas row-offcanvas-left">
            <!-- Left side column. contains the logo and sidebar -->
            <#include "../menu.html"/>

            <!-- Right side column. Contains the navbar and content of the page -->
           <aside class="right-side">
                <!-- Content Header (Page header) -->
                <section class="content-header"> 
                	<h1>新增客户</h1>
                    <ol class="ol_left">
		                <li>当前位置：</li>
		                <li><a href="list">客户管理</a></li>
		                <li>> 新增客户</li>
		            </ol>
		            <hr class="no-margin" />
                </section>
                <!-- Main content -->
                <section class="content">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="box" style="padding: 1px 20px"> 
                            	<div class="center">
                            		<div class="box-header">填写客户基本信息 </div>
                            	</div>  
                                <form onsubmit="return doAddCustomer();">
                                <div class="box-body center">
                                    <table class="table table-bordered">
                                        <tr>
                                            <td class="th">
                                            	<span><label class="star">*</label>客户姓名</span>
                                            </td>
                                            <td>
                                            	<div class="form-group">
		                                            <input type="text" class="form-control" id="fullname" name="fullname" placeholder="Enter ..."/>
		                                        </div>
                                            </td>
                                            <td class="th">
                                            	<span>简称</span>
                                            </td>
                                            <td>
                                            	<div class="form-group">
		                                            <input type="text" class="form-control" id="abbreviation" name="abbreviation" placeholder="Enter ..."/>
		                                        </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="th">
                                            	<span><label class="star">*</label>客户分类</span>
                                            </td>
                                            <td>
                                            	<div class="form-group">
		                                            <select class="form-control" id="category">
		                                                <option value="001">淘卖</option>
														<option value="002">品牌</option>
														<option value="003">网红</option>
		                                            </select>
		                                        </div>
                                            </td>
                                            <td class="th">
                                            	<span><label class="star">*</label>等级</span>
                                            </td>
                                            <td>
                                            	<div class="form-group">
		                                            <select class="form-control" id="level">
		                                                <option value="001">V1</option>
														<option value="002">V2</option>
														<option value="003">V3</option>
		                                            </select>
		                                        </div>
                                            </td>
                                        </tr>
                                       	<tr>
                                       		<td class="th"><span>联系人</span></td>
                                       		<td colspan="3">
                                       			<table class="contacts">
                                       				<tr>
                                       					<td>
                                       						<table class="table">
                                       							<tr>
                                       								<td style="border:none; padding: 8px 0" width="auto">
                                       									<span><label class="star">*</label>姓名：</span>
                                       								</td>	
                                       								<td  style="border:none">
                                       									<div class="form-group">
								                                            <input type="text" class="form-control" name="linkman" />
								                                        </div>
                                       								</td>
                                       							</tr>
                                       						</table>
                                       					</td>
                                       					<td>
                                       						<table class="table">
                                       							<tr>
                                       								<td  style="border:none;padding: 8px 0" width="auto">
                                       									<span><label class="star">*</label>手机号：</span>
                                       								</td>	
                                       								<td  style="border:none">
                                       									<div class="form-group">
								                                            <input type="text" class="form-control" name="contact" />
								                                        </div>
                                       								</td>
                                       							</tr>
                                       						</table>
                                       					</td>
                                       					<td class="find_div">
                                       						<table class="table">
                                       							<tr>
                                       								<td  style="border:none;padding: 8px 0"width="auto">
                                       									<span>邮箱：</span>
                                       								</td>	
                                       								<td  style="border:none">
                                       									<div class="form-group">
								                                            <input type="text" class="form-control"" name="email" />
								                                        </div>
                                       								</td>
                                       							</tr>
                                       						</table>
													        <div class="find_div_xianshi" >
		                                                        <span>@qq.com</span>
		                                                    </div>
                                       					</td>
                                       					<td>
                                       						<table class="table">
                                       							<tr>
                                       								<td  style="border:none;padding: 8px 0"width="auto">
                                       									<span>职位/部门：</span>
                                       								</td>	
                                       								<td  style="border:none">
                                       									<div class="form-group">
								                                            <input type="text" class="form-control" name="deptOrPos" />
								                                        </div>
                                       								</td>
                                       							</tr>
                                       						</table>
                                       					</td>
                                       					<td style="margin-left:20px">
                                       						<button type="button" class="btn btn-default btn-md btn-flat">删除</button>
                                       					</td>
                                       				</tr>
                                       			</table>
												<div class="addLink">+添加更多联系人</div>
                                       		</td>
                                       	</tr>
                                       	<tr>
                                       		<td class="th"><span>公司地址</span></td>
                                       		<td colspan="3">
                                       			<table>
                                       				<tr>
                                       					<td>
                                       						<div class="form-group">
					                                            <select id="provinceId" class="form-control">
					                                                <option value="">请选择</option>
					                                            </select>
			                                        		</div>
                                       					</td>
                                       					<td>
                                       						<div  class="form-group">
					                                            <select class="form-control" id="cityId">
					                                                <option value="">请选择</option>
					                                            </select>
			                                        		</div>
                                       					</td>
                                       					<td>
                                       						<div class="form-group">
					                                            <select id="areaId" class="form-control">
					                                                <option value="">请选择</option>
					                                            </select>
			                                        		</div>
                                       					</td>
                                       				</tr>
                                       			</table>
                                       			<div class="form-group no-margin">
		                                            <input type="text" class="form-control" id="detailAddress" placeholder="填写详细地址"/>
		                                        </div>
                                       		</td>
                                       	</tr>
                                       	<tr>
                                       		<td class="th"><span>收件地址</span></td>
                                       		<td colspan="3">
                                       			<div class="form-group no-margin">
		                                            <input type="text" class="form-control" id="deliveryAddress" placeholder="默认公司地址"/>
		                                        </div>
                                       		</td>
                                       	</tr>
                                       	<tr>
                                       		<td class="th"><span>网址</span></td>
                                       		<td colspan="3">
                                       			<div class="form-group no-margin">
		                                            <input type="text" class="form-control" name="web" id="web" placeholder="http://www."/>
		                                        </div>
                                       		</td>
                                       	</tr>
                                       	<tr>
                                       		<td class="th"><span>备注</span></td>
                                       		<td colspan="3">
                                       			<div class="form-group no-margin">
		                                            <textarea class="form-control" id="memo" rows="3" placeholder="可填写最近状态、所需支持"></textarea>
		                                        </div>
                                       		</td>
                                       	</tr>
                                    </table>
                                    
                                </div><!-- /.box-body -->
                                
                                <div id="more" class="center">
                                <div class="box-header">填写更多完整信息 </div><!-- /.box-header -->
                                <div class="box-body">
                                    <table class="table table-bordered">
                                        <tr>
                                            <td class="th" width="8%">
                                            	<span>产品分类</span>
                                            </td>
                                            <td  colspan="3">
                                            	<div class="form-group find_div no-margin">
                                            		<input type="text" value="" data-role="tagsinput" id="productCategory"/>
		                                            <!-- <input type="text" class="form-control" id="productCategory" />
		                                            <div>以顿号隔开</div> -->
		                                            <div class="find_div_xianshi" >
                                                        <a>这里是提示</a>
                                                        <a>这里是提</a>
                                                        <a>这里是</a>
                                                        <a>这里</a>
                                                    </div>
                                        		</div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="th">
                                            	<span>风格标签</span>
                                            </td>
                                            <td colspan="3">
                                            	<div class="form-group find_div no-margin">
                                            		<input type="text" value="" data-role="tagsinput" id="styleLabel"/>
		                                            <!-- <input type="text" class="form-control" id="styleLabel" />
		                                            <div>以顿号隔开</div> -->
		                                            <div class="find_div_xianshi" >
                                                        <a>这里是提示</a>
                                                        <a>这里是提</a>
                                                        <a>这里是</a>
                                                        <a>这里</a>
                                                    </div>
                                        		</div>
                                            </td>
                                        </tr>
                                       	<tr>
                                       		<td class="th"><span>附件</span></td>
                                       		<td>
                                       			<div class="form-group no-margin">
		                                            <div class="file_fa">
                                    					<a href="javascript:;" class="file">
														    <input type="file" name="new">点击上传文件
														</a>
														<span class="file_name"></span>
                                    				</div>
		                                            <p class="help-block">附件支持：word、excel、ppt、 rar、zip等格式</p>
		                                        </div>
                                       		</td>
                                       	</tr>
                                       	<tr>
                                       		<td class="th"><span>目标人群</span></td>
                                       		<td colspan="3">
                                       			<div class="form-group no-margin">
		                                            <input type="text" id="targetConsumer" class="form-control" />
		                                        </div>
                                       		</td>
                                       	</tr>
                                       	<tr>
                                       		<td class="th"><span>销售渠道</span></td>
                                       		<td colspan="3">
                                       			<div class="form-group no-margin">
		                                            <input type="text" id="saleChannel" class="form-control" />
		                                        </div>
                                       		</td>
                                       	</tr>
                                       	<tr>
                                       		<td class="th"><span>预计年销售额</span></td>
                                       		<td>
                                       		<input id="saleAmount" style="border: 1px solid #ccc; height: 30px; width: 20%" type="text" />&nbsp;&nbsp;万元
                                       			
                                       		</td>
                                       	</tr>
                                       	<tr>
                                       		<td class="th"><span>销售价格</span></td>
                                       		<td>
                                       			<input id="salePrice" style="border: 1px solid #ccc; height: 30px; width: 20%" type="text" />&nbsp;&nbsp;元
                                       			
                                       		</td>
                                       	</tr>
                                       	<tr>
                                       		<td class="th"><span>上新频率</span></td>
                                       		<td colspan="3">
                                       			<input id="updateFrequency" style="border: 1px solid #ccc; height: 30px;" type="text" />
                                       		</td>
                                       	</tr>
                                       	<tr>
                                       		<td class="th"><span>上新数量</span></td>
                                       		<td colspan="3">
                                       			<input id="updateCount" name="updateCount" style="border: 1px solid #ccc; height: 30px;" type="text" />&nbsp;&nbsp;款/次
                                       		</td>
                                       	</tr>
                                    </table>
                                </div><!-- /.box-body -->
                                </div>
                                <div class="footer" style="margin: 30px 110px 20px;">
                                	<ul style="list-style: none;">
					                        <li style="margin-bottom: 20px;"><a href="javascript:;" id="show_more">填写更多完整信息>></a></li>
					                </ul>
                                	<button type="submit" id="add" class="btn btn-primary">确定新增</button>
                                	<button type="button" id="give_up" class="btn btn-default">放弃新增</button>
                                </div>
                                </form>
                            </div><!-- /.box -->
                        </div><!-- /.col -->
                    </div><!-- /.row -->
                </section><!-- /.content -->
            </aside><!-- /.right-side -->
        </div><!-- ./wrapper -->
        <!-- jQuery 2.0.2 -->
        <script src="../js/jquery.min.js"></script>
        <!-- Bootstrap -->
        <script src="../js/bootstrap.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="../js/bootstrapValidator.min.js"></script>  
        <!-- AdminLTE App -->
        <script src="../js/AdminLTE/app.js" type="text/javascript"></script>
        <script src="../js/bootstrap-tagsinput.js"></script>
        <script src="../js/customer/customer.js" type="text/javascript"></script>
        <script src="../js/customer/customer_add.js" type="text/javascript"></script>
    </body>
    <script>
		$(function(){
			doReadArea(1,'provinceId');
			$('table button').click(removeContact);
			$('.bootstrap-tagsinput').children('input').attr('placeholder','输入内容后，敲回车键生成标签');
			//$(':file').change(getFilename);
		})
		
		
		/* $('.content-header').after('<hr />'); */
	</script>
</html>
